<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <base href="../">
    <!-- Styles -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css" type="text/css"/>
    <link rel="stylesheet" href="fonts/themify-icons/themify-icons.css" type="text/css"/>
    <link rel="stylesheet" href="css/owl.carousel.css" type="text/css"/>
    <link rel="stylesheet" href="css/price-range.css" type="text/css"/>

    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <link rel="stylesheet" href="css/responsive.css" type="text/css"/>
    <link rel="stylesheet" href="css/colors.css" type="text/css"/>

    <link rel="stylesheet" type="text/css" href="js/rs-plugin/css/settings.css">

</head>
<body>
<!-- /.preloader -->
<div id="preloader"></div>

<!-- 实名认证组件 -->
<template id="personalidentity">
    <div class="col-md-8 column">
        <div class="heading4">
            <h2>实名认证</h2>
        </div>
        <div class="control-group">
            <div class="group-title">身份证正面</div>
            <div class="group-container row">
                <div class="col-md-12">
                    <div class="moxie-shim moxie-shim-html5">
                        <label for="front_img" class="btn flat-btn btn-lg" v-if="!frontImg">Select Images</label>
                        <FormItem label="front">
                            <div class="ivu-upload ivu-upload-drag">
                                <input id="front_img" type="file" class="ivu-upload-input" ref="idCardFront" v-on:change="up1">
                                <div style="padding: 20px 0px;" v-else>
                                    <i class="ivu-icon ivu-icon-ios-cloud-upload"
                                       style="font-size: 52px; color: rgb(51, 153, 255);"></i>
                                </div>
                            </div>
                        </FormItem>
                    </div>
                    <img :src="frontImg" v-if="frontImg" width="300px" height="200px">
                    <p v-if="!frontImg">请上传您的身份证正面</p>
                </div>
            </div>
        </div>
        <div class="control-group">
            <div class="group-title">身份证反面</div>
            <div class="group-container row">
                <div class="col-md-12">
                    <div class="moxie-shim moxie-shim-html5">
                        <label for="back_img" class="btn flat-btn btn-lg" v-if="!backImg">Select Images</label>
                        <FormItem label="back">
                            <div class="ivu-upload ivu-upload-drag">
                                <input id="back_img" type="file" class="ivu-upload-input" ref="idCardBack" v-on:change="up2">
                                <div style="padding: 20px 0px;" v-else>
                                    <i class="ivu-icon ivu-icon-ios-cloud-upload"
                                       style="font-size: 52px; color: rgb(51, 153, 255);"></i>
                                </div>
                            </div>
                        </FormItem>
                    </div>
                    <img :src="backImg" v-if="backImg" width="300px" height="200px">
                    <p v-if="!backImg">请上传您的身份证反面</p>
                </div>
            </div>
        </div>
        <div class="submit" style="clear: both; margin-top: 25px;">
            <div class="col-md-push-5 col-md-6">
                <input type="button" class="btn btn-lg flat-btn" value="提交" @click="verified" >
            </div>
        </div>
    </div>
</template>

<!-- 个人信息上传-->
<template id="personal">
    <div class="col-md-10 column" style="width: 700px;height: 800px ">
        <div class="heading4">
            <h2>个人信息</h2>
        </div>
        <div class="submit-content">
            <form id="user_form" method="post" class="vehicul-form">
                <div class="control-group">
                    <div class="group-title">Personal information</div>
                    <div class="group-container row">
                        <div class="col-md-4">

                            <div class="form-group">
                                <!-- &nbsp;&#42; -->
                                <label for="account"> 昵称 </label>
                                <input type="text" id="account" class="form-control" v-model="account">
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="form-group">
                                <label for="birthday"> 出生日期 </label>
                                <input type="text" id="birthday" class="form-control" v-model="birthday">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="uenmail"> 邮箱 </label>
                                <input type="text" id="uenmail" class="form-control" v-model="uemail">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="province"> 省 </label>
                                <select id="province" class="form-control" v-model="province">
                                    <option v-for="option in provinceArr" :value="option.name">
                                        {{option.name}}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="city"> 市 </label>
                                <select id="city" class="form-control" v-model="city">
                                    <option v-for="option in cityArr" :value="option.name">
                                        {{option.name}}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="area"> 区 </label>
                                <select id="area" class="form-control" v-model="area">
                                    <option v-for="option in areaArr" :value="option.name">
                                        {{option.name}}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="info"> 详细地址 </label>
                                <input type="text" id="info" class="form-control" v-model="info">
                            </div>
                        </div>
                    </div>
                    <div class="submit" style="clear: both; margin-top: 25px;">
                        <div class="col-md-push-5 col-md-6">
                            <input type="button" class="btn btn-lg flat-btn" id="submit" value="提交" @click="add()">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<!-- 车库认证-->
<template id="garage">
    <div class="col-md-8 column" style="width: 700px">
        <div class="heading4">
            <h2>车库图片</h2>
        </div>
        <div class="control-group">
            <div class="group-title">车库图片正面</div>
            <div class="group-container row">
                <div class="col-md-12">
                    <div class="moxie-shim moxie-shim-html5">
                        <label for="front_img" class="btn flat-btn btn-lg" v-if="!frontImg">Select Images</label>
                        <FormItem label="front">
                            <div class="ivu-upload ivu-upload-drag">
                                <input id="front_img" type="file" class="ivu-upload-input" ref="idCardFront"
                                       v-on:change="up1">
                                <div style="padding: 20px 0px;" v-else>
                                    <i class="ivu-icon ivu-icon-ios-cloud-upload"
                                       style="font-size: 52px; color: rgb(51, 153, 255);"></i>
                                </div>
                            </div>
                        </FormItem>
                    </div>
                    <img :src="frontImg" v-if="frontImg" width="300px" height="200px">
                    <p v-if="!frontImg">请上传您的车库图片的正面</p>
                </div>
            </div>
        </div>

        <div class="submit" style="clear: both; margin-top: 25px;">
            <div class="col-md-push-5 col-md-6">
                <input type="button" class="btn btn-lg flat-btn" value="提交" @click="verified">
            </div>
        </div>
    </div>
</template>

<template id="garagePackage">
    <div class="col-md-8 column" style="width: 700px">
        <div class="heading4">
            <h2>车库产权认证</h2>
        </div>
        <div class="control-group">
            <div class="group-title">车库产权正面</div>
            <div class="group-container row">
                <div class="col-md-12">
                    <div class="moxie-shim moxie-shim-html5">
                        <label for="front_img" class="btn flat-btn btn-lg" v-if="!frontImg">Select Images</label>
                        <FormItem label="front">
                            <div class="ivu-upload ivu-upload-drag">
                                <input id="front_img" type="file" class="ivu-upload-input" ref="idCardFront"
                                       v-on:change="up1">
                                <div style="padding: 20px 0px;" v-else>
                                    <i class="ivu-icon ivu-icon-ios-cloud-upload"
                                       style="font-size: 52px; color: rgb(51, 153, 255);"></i>
                                </div>
                            </div>
                        </FormItem>
                    </div>
                    <img :src="frontImg" v-if="frontImg" width="300px" height="200px">
                    <p v-if="!frontImg">请上传您的车库产权的正面</p>
                </div>
            </div>
        </div>

        <div class="submit" style="clear: both; margin-top: 25px;">
            <div class="col-md-push-5 col-md-6">
                <input type="button" class="btn btn-lg flat-btn" value="提交" @click="verified">
            </div>
        </div>
    </div>
</template>

<template id="orderToUpload">

    <div class="col-md-10 column" style="width: 700px;height: 800px ">
        <script src="laydate/laydate.js"></script>
        <div class="heading4">
            <h2>上传车位订单信息</h2>
        </div>
        <div class="submit-content">
            <form id="userform" method="post" class="vehicul-form">
                <div class="control-group">
                    <div class="group-title">Personal information</div>
                    <div class="group-container row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="province">上传车位选择</label>
                                <select  class="form-control" id="select" >
                                    <option v-for="option in parking" :value="option.pid" >
                                        {{option.pnumber}}
                                    </option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="province">分钱方案</label>
                                <select  class="form-control" id="selects">
                                    <option v-for="option in commissionList" :value="option.cmid" >
                                        {{option.rent}}--{{option.platform}}--{{option.property}}
                                    </option>
                                </select>
                            </div>

                            <div class="form-group col-md-12">
                                <div class="label-select">
                                    <input class="form-control" id="startTime" placeholder="起始时间"/>
                                </div>
                            </div>

                            <div class="form-group col-md-12">
                                <div class="label-select">
                                    <input class="form-control" id="endTime" placeholder="结束时间"/>
                                </div>
                            </div>

                            <div class="field">
                                <input type="text" placeholder="请输入价格"  id="price"/>
                            </div>


                    <div class="submit" style="clear: both; margin-top: 25px;">
                        <div class="col-md-push-5 col-md-6">
                            <input type="button" class="btn btn-lg flat-btn" id="submits" value="提交" @click="add()">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>


</template>

<template id="t2">
    <div class="registration-sec">
        <h1>密码修改</h1>
        <form>
            <div class="field">
                <input type="text" placeholder="请输入手机号" style="width: 800px;height: 50px" v-model="uphone"/>

            </div>
            <div class="field">
                <input type="text" placeholder="请输入验证码" style="width: 400px;height: 50px" v-model="codes"/>
                <button type="button" class="btn btn-success btn-lg" style="margin-top: 20px" @click="save">免费发送验证码
                </button>
            </div>


            <div class="field">
                <input type="password" placeholder="请输新密码，长度为6" v-model="newPassword"/>
            </div>
            <div class="field">
                <input type="password" placeholder="请再次输入新密码，长度为6" v-model="newPasswords"/>
            </div>


            <input type="button" value="注册" class="flat-btn" style="left: 500px" @click="submit"/>

        </form>
    </div><!-- Registration sec -->
</template>

<template id="parking">
    <div class="col-md-5 column">
        <section class="block remove-top">
            <div class="container">
                <div class="row">
                    <div class="col-md-12" style="left: 100px;top:-60px">
                        <div class="heading4" style="left:-200px">
                            <h2>车位图片 </h2>

                        </div>
                        <div class="vehiculs-sec">
                            <div class="carousel-prop">
                                <div v-for="item,index in list">
                                    <div class="vehiculs-thumb">
                                        <a href="javascript:void(0)">

                                            <img :src="item.img" style="width: 800px;height: 400px "
                                                 alt=""/>
                                        </a>
                                        <span class="spn-status">车位{{index+1}}</span>
                                        <span class="spn-save"> <i class="ti tsi-heart"></i> </span>

                                    </div>
                                    <h3><a>{{item.userInfo.community.cname}}--({{item.pnumber}})--{{item.status}}</a>
                                    </h3>

                                </div>

                            </div><!-- Carousel -->
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<template id="orderComponent">
    <div class="col-md-5 column">
        <section class="block remove-top">
            <div class="container">
                <div class="row">
                    <div class="col-md-12" style="left: 0px;top:-60px">
                        <div class="heading4" style="left:-200px">
                            <h2>订单详情 </h2>
                        </div>
                        <table class="table table-striped table-hover">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>订单号</th>
                                <th>姓名</th>
                                <th>开始时间</th>
                                <th>结束时间</th>
                                <th>支付时间</th>
                                <th>离开时间</th>
                                <th>订单价格</th>
                                <th>订单状态</th>

                            </tr>
                            </thead>
                            <tbody>
                            <template v-for="item,index in list">
                                <tr>
                                    <td>{{index+1}}</td>
                                    <td>{{item.onumber}}</td>
                                    <td>{{item.userInfo.uname}}</td>
                                    <td>{{item.starttime}}</td>
                                    <td>{{item.endtime}}</td>
                                    <td>{{item.paytime}}</td>
                                    <td>{{item.leavetime}}</td>
                                    <td>{{item.price}}</td>
                                    <td>{{item.status}}</td>


                                </tr>

                            </template>
                            <td colspan="9" align="center">
                                <a @click="go(pageInfo.firstPage)">首页</a>
                                <a @click="go(pageInfo.prePage)">上一页</a>
                                <a @click="go(pageInfo.nextPage)">下一页</a>
                                <a @click="go(pageInfo.pages)">尾页</a>
                            </td>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </div>

</template>

<template id="lockComponent">
    <div class="col-md-5 column">
        <section class="block remove-top">
            <div class="container">
                <div class="row">
                    <div class="col-md-12" style="left: 0px;top:-60px">
                        <div class="heading4" style="left:-200px">
                            <h2>留言评论 </h2>
                        </div>
                        <table class="table table-striped table-hover">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>车位编号</th>
                                <th>星级评价</th>
                                <th>评价内容</th>



                            </tr>
                            </thead>
                            <tbody>
                            <template v-for="item,index in list">
                                <tr>
                                    <td>{{index+1}}</td>
                                    <td>{{item.pnumber}}</td>
                                    <td>{{item.score}}</td>
                                    <td>{{item.content}}</td>
                                </tr>

                            </template>
                            <td colspan="4" align="center">
                                <a @click="go(pageInfo.firstPage)">首页</a>
                                <a @click="go(pageInfo.prePage)">上一页</a>
                                <a @click="go(pageInfo.nextPage)">下一页</a>
                                <a @click="go(pageInfo.pages)">尾页</a>
                            </td>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </div>

</template>

<!-- 用户钱包组件 -->
<template id="wallet">
    <div class="col-md-9 column">
        <div class="heading4">
            <h2>我的钱包</h2>
        </div>
        <div class="col-md-6">
            <div class="heading2">
                <h3>账户余额</h3>
            </div>
            <div class="plan-content">
                <div align="center">
                    <h2><span class="price">¥{{balance}}</span></h2>
                    <input class="btn btn-success" value="充值" type="button" @click="recharge()">
                    <input class="btn btn-warning" value="提现" type="button" @click="withdraw()">
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="heading2">
                <h3>我的卡包</h3>
            </div>
            <div class="demo">
                <template v-for="coupon in couponList">
                    <div class="stamp stamp03">
                        <div class="par">
                            <p>订单满{{coupon.coupon.conditionMoney}}元</p>
                            <sub class="sign">￥</sub><span>{{coupon.coupon.money}}.00</span><sub>优惠券</sub>
                        </div>
                        <div class="copy">
                            <p>Super SPS</p>
                            副券
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <div class="submit-content" id="rech" hidden>
            <form method="post">
                <div class="control-group">
                    <div class="group-container row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="money"> 请输入金额 </label>
                                <input type="text" id="money" class="form-control" v-model="money">
                            </div>
                        </div>
                        <div class="submit" style="clear: both; margin-top: 25px;">
                            <div class="col-md-push-5 col-md-6">
                                <input type="button" class="btn btn-lg flat-btn" value="提交" @click="updateBalance">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<!-- 用户充值组件
<template id="recharge">
    <div class="col-md-9">
        <div class="heading4">
            <h2>充值界面</h2>
        </div>
        <div class="col-md-6">
            <div class="price-table">
                <ul>
                    <li class="price-title">Super Member</li>
                    <li class="price-area"><i class="ti ti-home"></i>
                        <h3><i>¥</i>99</h3></li>
                    <li class="price-title">SSPS 超级会员</li>
                    <li class="price-table">满500抵100优惠券<span style="color: red;font-size: 30px">*1</span></li>
                    <li class="price-table">满200抵25优惠券<span style="color: red;font-size: 30px">*2</span></li>
                    <li class="price-table">满100抵10优惠券<span style="color: red;font-size: 30px">*5</span></li>
                    <li class="price-features"></li>
                    <li class="price-features"></li>
                    <li class="price-button"><a title="" href="#">SIGN UP</a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-6">
            <div class="price-table">
                <ul>
                    <li class="price-title">Invincible Member</li>
                    <li class="price-area"><i class="ti ti-home"></i>
                        <h3><i>¥</i>299</h3></li>
                    <li class="price-title">SSPS 无敌会员</li>
                    <li class="price-table">满500抵100优惠券<span style="color: red;font-size: 30px">*3</span></li>
                    <li class="price-table">满200抵25优惠券<span style="color: red;font-size: 30px">*8</span></li>
                    <li class="price-table">满100抵10优惠券<span style="color: red;font-size: 30px">*10</span></li>
                    <li class="price-features"></li>
                    <li class="price-features"></li>
                    <li class="price-button"><a title="" href="#">SIGN UP</a></li>
                </ul>
            </div>
        </div>
    </div>
</template>-->

<!-- 推荐用户组件 -->
<template id="recommend">
    <div class="col-md-9 column">
        <div class="heading4">
            <h2>推荐用户</h2>
        </div>
        <div class="col-md-6">
            <div class="heading2">
                <h3>我的二维码</h3>
            </div>
            <div class="plan-content">
                <form class="subscription_post">
                    <div id="mycode" align="center"></div>
                </form>
                <div align="center">
                    {{mycode}}<br>
                    <div class="package-info">
                        Your Referral Code
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="heading2">
                <h3>填写邀请码</h3>
            </div>
            <div class="plan-content">
                <form class="subscription_post">
                    <div class="form-group">
                        <br>
                        <label for="othercode">推荐码</label>
                        <input id="othercode" class="input-group" v-model="othercode" :disabled="!flag"/>
                        <br>
                        <input class="btn btn-success" value="提交" type="button" :disabled="!flag" @click="referralCode()">
                    </div>
                    <div class="package-info">
                        You Can&nbsp;
                        <a @click.prevent="cname='verified'">Fill in someone else's</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<div class="theme-layout" id="app">
    <div class="account-popup-sec">

        <div class="account-popup-area">
            <div class="account-popup">
                <div class="row">
                    <div class="col-md-6">
                        <div class="account-user">
                            <div class="logo">
                                <a href="#" title="">
                                    <i class="fa fa-get-pocket"></i>
                                    <span>共享车位</span>

                                </a>
                            </div><!-- LOGO -->
                            <form>
                                <h1>用户登录</h1>
                                <div class="field">
                                    <input type="text" placeholder="请输入账号"/>
                                </div>
                                <div class="field">
                                    <input type="password" placeholder="请输入密码"/>
                                </div>
                                <div class="field">
                                    <input type="submit" value="登录" class="flat-btn"/>
                                </div>
                            </form>
                            <i>OR</i>
                            <span>sdfs</span>
                            <ul class="social-btns">
                                <li><a href="#" title=""><i class="fa fa-facebook"></i></a></li>
                                <li><a href="#" title=""><i class="fa fa-google-plus"></i></a></li>
                                <li><a href="#" title=""><i class="fa fa-twitter"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="registration-sec">
                            <h1>用户注册</h1>
                            <form>
                                <div class="field">
                                    <input type="text" placeholder="请输入名称"/>
                                </div>
                                <div class="field">
                                    <input type="text" placeholder="请输入电子邮箱"/>
                                </div>
                                <div class="field">
                                    <input type="password" placeholder="请输入密码"/>
                                </div>
                                <div class="field">
                                    <input type="password" placeholder="请再次输入密码"/>
                                </div>
                                <label>
                                    <input type="checkbox"/> By Clicking on this You are agree with our <a href="#"
                                                                                                           title="">Terms
                                    & Condition</a>
                                </label>
                                <input type="submit" value="注册" class="flat-btn"/>
                            </form>
                        </div><!-- Registration sec -->
                    </div>
                </div>
                <span class="close-popup"><i class="fa fa-close"></i></span>
            </div>
        </div>
    </div><!-- Account Popup Sec -->


    <header class="simple-header for-sticky white">
        <div class="menu">
            <div class="container">
                <div class="logo">
                    <a href="index.html" title="">
                        <i class="fa fa-get-pocket"></i>
                        <span>共享车位</span>
                        <strong> SHARED PARKING</strong>
                    </a>
                </div><!-- LOGO -->
                <div class="popup-client">
                    <span><i class="fa fa-user"></i> /  Signup</span>
                </div>
                <span class="menu-toggle"><i class="fa fa-bars"></i></span>
                <nav>
                    <h1 class="nocontent outline">--- Main Navigation ---</h1>
                    <ul>
                        <li class="menu-item-has-children">
                            <a href="#" title="">住宅</a>
                            <ul>
                                <li><a href="index.html" title="">Home v1</a></li>
                            </ul>
                        </li>
                        <li class="menu-item-has-children">
                            <a href="#" title="">车辆</a>
                            <ul>
                                <li><a href="vehiculs3.html" title="">vehiculs- Super </a></li>
                            </ul>
                        </li>
                        <li class="menu-item-has-children">
                            <a href="#" title="">BLOG PAGES</a>
                            <ul>
                                <li><a href="blog.html" title="">Blog Page</a></li>
                            </ul>
                        </li>

                        <li><a href="contact.html" title="">联系方式</a></li>
                    </ul>
                </nav>

            </div>
        </div>
    </header>

    <div class="inner-head overlap">
        <div style="background: url(img/parallax1.jpg) repeat scroll 50% 422.28px transparent;"
             class="parallax scrolly-invisible no-parallax"></div>
        <!- PARALLAX BACKGROUND IMAGE ->
        <div class="container">
            <div class="inner-content">
                <span><i class="ti ti-home"></i></span>
                <h2>共享车位新经济</h2>
                <ul>
                    <li><a href="#" title="">HOME</a></li>
                    <li><a href="#" title="">SUBMIT VEHICUL</a></li>
                </ul>
            </div>
        </div>
    </div>


    <section class="block">
        <div class="container agnet-prop">
            <div class="row">
                <aside class="col-lg-4 column">
                    <div class="agent_bg_widget widget">
                        <div class="agent_widget">
                            <div class="agent_pic">

                                    <!--<img src="img/demo/man1.jpg" alt=""/>-->
                                   <img id="avatar" :src="img" alt="user_img"/>
                                    <div>{{name}}</div>
                                    <input type="file" ref="img" id="picpath" v-on:change="uploadImg" style="display:none;"/>
                                    <input type="button" value="上传照片" @click="clickBtn"/>
                            <ul class="agent-menu">
                                <li>
                                    <a @click.prevent="cname='personalidentityComponent'"><i class="fa fa-user"> </i>身份证上传</a>
                                </li>
                                <li>
                                    <a @click.prevent="cname='personalComponent'"><i class="fa fa-user"> </i> 个人信息 </a>
                                </li>
                                <li>
                                    <a @click.prevent="cname='garageComponent'"><i class="fa fa-user"> </i>车库图片</a>
                                </li>
                                <li>
                                    <a @click.prevent="cname='garagePackageComponent'"><i
                                            class="fa fa-user"> </i>车库产权</a>
                                </li>
                                <li>
                                    <a @click.prevent="cname='orderToUploadComponent'"><i
                                            class="fa fa-user"> </i>上传订单</a>
                                </li>
                                <li>
                                    <a @click.prevent="cname='updatePasswordComponent'"><i class="fa fa-home"> </i> 修改密码
                                    </a>
                                </li>
                                <li>
                                    <a @click.prevent="cname='parkingConponent'"><i class="fa fa-home"> </i> 展示车位 </a>
                                </li>
                                <li>
                                    <a @click.prevent="cname='orderComponent'"><i class="fa fa-sign-out"> </i> 订单查询 </a>
                                </li>
                                <li>
                                    <a @click.prevent="cname='burseComponent'"><i class="fa fa-sign-out"> </i> 我的钱包 </a>
                                </li>

                                <li>
                                    <a @click="cname='lockComponent'"><i class="fa fa-sign-out"> </i> 查看评论 </a>
                                </li>
                                <li>
                                    <a @click="cname='recommend'"><i class="fa fa-sign-out"> </i> 邀请用户 </a>
                                </li>
                                <li>
                                    <a @click.prevent="cname='recharge'"><i class="fa fa-money"> </i> 充值优惠 </a>
                                </li>
                                <li>
                                    <a @click="logout"><i class="fa fa-sign-out"> </i> 退出 </a>
                                </li>
                            </ul>
                        </div>
                        </div>
                    </div>
                </aside>
                <div class="col-lg-8 column">
                    <component :is="cname"></component>
                </div>
            </div>
        </div>
    </section>
</div>

<!-- Script -->
<script type="text/javascript" src="js/modernizr.js"></script><!-- Modernizer -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><!-- Jquery -->
<script type="text/javascript" src="js/bootstrap.min.js"></script><!-- Bootstrap -->
<script type="text/javascript" src="js/owl.carousel.min.js"></script><!-- Owl Carousal -->
<script type="text/javascript" src="js/html5lightbox.js"></script><!-- HTML -->
<script type="text/javascript" src="js/scrolly.js"></script><!-- Parallax -->
<script type="text/javascript" src="js/price-range.js"></script><!-- Parallax -->
<script type="text/javascript" src="js/script.js"></script><!-- Script -->

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="laydate/laydate.js"></script>
<script type="text/javascript">



    var app = new Vue({
        el: "#app",
        data: {
            /* 定义默认显示哪个组件 */
            cname: "parkingConponent",
            /* 用户的真实姓名 */
            name: "",
            /* 用户头像的地址 */
            img: "",
        },
        mounted() {
            axios.defaults.baseURL = "http://172.16.5.56:8080";
            axios.defaults.withCredentials = true;
            this.init();
        },

        methods: {
            init() {
                let self = this;
                axios.post("LessorUser/selectOne").then(function (res) {
                    self.name = res.data.loginUserInfo.uname;
                    self.img = "http://" + res.data.loginUserInfo.img;
                })
            },
            clickBtn() {
                $("#picpath").click();
            },
            uploadImg(e) {
                // 获取待上传的文件对象
                let file = e.target.files[0]
                // 声明一个读取文件对象
                let reader = new FileReader();
                // 开始读取文件内容
                reader.readAsDataURL(file);
                // 读取操作结束时触发
                let self = this;
                reader.onloadend = () => {
                    let formData = new FormData();
                    formData.append("img", this.$refs.img.files[0]);
                    axios.post("LessorUser/uploadImg", formData).then(function (res) {
                        layer.msg(res.data.result, function () {
                            self.init();
                        })
                    });
                };
            },

            logout() {
                axios.post("LessorUser/logout").then(function (res) {
                    layer.msg(res.data.result, function () {
                        // 跳转首页
                        location.href = "";
                    })
                })
            }
        },
        components: {

            "personalComponent": {
                template: "#personal",
                data() {
                    return {
                        account: "",
                        birthday: "",
                        uemail: "",
                        province: "陕西省",
                        city: "",
                        area: "",
                        provinceArr: [],
                        cityArr: [],
                        areaArr: [],
                        info: "",
                    }
                },
                created() {
                    laydate.render({
                        elem: "#birthday"
                        , theme: 'molv',
                        format: 'yyyy-MM-dd',// 设置显示格式
                        done: value => {
                            this.birthday = value;
                        }
                    });
                },
                mounted() {
                    axios.defaults.baseUrl = "http://172.16.5.56:8080"
                    this.init();
                    var self=this;
                    axios.post("LessorUser/backUserInfo").then(function (request) {
                        self.info=request.data.userInfo1.address;
                        self.account=request.data.userInfo1.uname;
                        self.birthday=request.data.userInfo1.birthday;
                        self.uemail=request.data.userInfo1.uemail;
                        self.province=request.data.userInfo1.address.substring(0,request.data.userInfo1.address.indexOf("省")+1);
                    /*   self.provinceArr=request.data.userInfo1.address.substring(request.data.userInfo1.address.indexOf("省")+1,request.data.userInfo1.address.indexOf("市")+1);
                       self.areaArr=request.data.userInfo1.address.substring(request.data.userInfo1.address.indexOf("市")+1,request.data.userInfo1.address.indexOf("区")+1);*/
                              /*    $("#province").val(request.data.userInfo1.address.substring(0,request.data.userInfo1.address.indexOf("省")+1));
                                  $("#account").val(request.data.userInfo1.address.substring(request.data.userInfo1.address.indexOf("省")+1,request.data.userInfo1.address.indexOf("市")+1));
                                  $("#birthday").val(request.data.userInfo1.address.substring(request.data.userInfo1.address.indexOf("市")+1,request.data.userInfo1.address.indexOf("区")+1));*/
                            console.log(request.data.userInfo1.address.substring(0,request.data.userInfo1.address.indexOf("省")+1))
                            console.log(request.data.userInfo1.address.substring(request.data.userInfo1.address.indexOf("省")+1,request.data.userInfo1.address.indexOf("市")+1));
                            console.log(request.data.userInfo1.address.substring(request.data.userInfo1.address.indexOf("市")+1,request.data.userInfo1.address.indexOf("区")+1));
                            console.log(request.data)
                        console.log(request.data.userInfo1.address)
                    })
                },
                methods: {
                    init() {
                        var self = this;
                        $.getJSON("./js/city_code.json", function (res) {
                            self.provinceArr = res;
                            self.updateCity()
                            self.updateArea()
                        });

                    },
                    updateCity: function () {
                        for (let i in this.provinceArr) {
                            let obj = this.provinceArr[i];
                            if (obj.name == this.province) {
                                this.cityArr = obj.city;
                                break;
                            }
                        }
                        this.city = this.cityArr[0].name;
                    },
                    updateArea: function () {
                        for (let i in this.cityArr) {
                            let obj = this.cityArr[i];
                            if (obj.name == this.city) {
                                this.areaArr = obj.area;
                                break;
                            }
                        }
                        if (this.areaArr && this.areaArr.length >= 0 && this.areaArr[0].name) {
                            this.area = this.areaArr[0].name;
                        } else {
                            this.area = '';
                        }
                    },
                    update() {
                        var self=this;
                        axios.post("LessorUser/updateUser", {
                            account: self.account,
                            birthday: self.birthday,
                            uemail: self.uemail,
                            address: self.province + "," + self.city + "," + self.area + "," + self.info,
                        }).then(function (res) {
                            layer.msg(res.result, {})
                        });
                    },
                },
                watch: {
                    province: function () {
                        this.updateCity();
                        this.updateArea();
                    },
                    city: function () {
                        this.updateArea();
                    }
                }


            },

            "personalidentityComponent": {
                template: "#personalidentity",
                data() {
                    return {
                        backImg: "",
                        frontImg: "",
                    }
                },
                mounted() {

                },
                methods: {

                    verified() {
                        let formData = new FormData();
                        formData.append("idCardFront", this.$refs.idCardFront.files[0]);
                        formData.append("idCardBack", this.$refs.idCardBack.files[0]);
                        axios.post("LessorUser/authentication", formData).then(function (res) {
                            alert(res.data.result);
                        });
                    },
                    // 选择文件
                    up1(e) {
                        // 获取待上传的文件对象
                        let file = e.target.files[0]
                        // 声明一个读取文件对象
                        let reader = new FileReader();
                        // 开始读取文件内容
                        reader.readAsDataURL(file);
                        // 读取操作结束时触发
                        reader.onloadend = (ev) => {
                            // 赋值给vue对象属性
                            this.frontImg = ev.target.result
                        };
                    },
                    up2(e) {
                        // 获取待上传的文件对象
                        let file = e.target.files[0]
                        // 声明一个读取文件对象
                        let reader = new FileReader();
                        // 开始读取文件内容
                        reader.readAsDataURL(file);
                        // 读取操作结束时触发
                        reader.onloadend = (ev) => {
                            // 赋值给vue对象属性
                            this.backImg = ev.target.result
                        };
                    },
                },


            },

            "garageComponent":{
                template: "#garage",

                data() {
                    return {

                        frontImg: "",
                    }
                },
                methods: {
                    verified() {
                        let formData = new FormData();
                        formData.append("idCardFront", this.$refs.idCardFront.files[0]);

                        axios.post("LessorUser/verifieds", formData).then(function (res) {
                            alert(res.data.result);
                        });
                    },
                    // 选择文件
                    up1(e) {
                        // 获取待上传的文件对象
                        let file = e.target.files[0]
                        // 声明一个读取文件对象
                        let reader = new FileReader();
                        // 开始读取文件内容
                        reader.readAsDataURL(file);
                        // 读取操作结束时触发
                        reader.onloadend = (ev) => {
                            // 赋值给vue对象属性
                            this.frontImg = ev.target.result
                        };
                    },

                },
            },

            "garagePackageComponent": {

                template: "#garagePackage",

                data() {

                    return {

                        frontImg: "",
                    }
                },
                methods: {
                    verified() {
                        let formData = new FormData();
                        formData.append("idCardFront", this.$refs.idCardFront.files[0]);

                        axios.post("LessorUser/verified", formData).then(function (res) {
                            alert(res.data.result);
                        });
                    },
                    // 选择文件
                    up1(e) {
                        // 获取待上传的文件对象
                        let file = e.target.files[0]
                        // 声明一个读取文件对象
                        let reader = new FileReader();
                        // 开始读取文件内容
                        reader.readAsDataURL(file);
                        // 读取操作结束时触发
                        reader.onloadend = (ev) => {
                            // 赋值给vue对象属性
                            this.frontImg = ev.target.result
                        };
                    },

                },
            },

            "orderToUploadComponent":{
                template:"#orderToUpload",
                data(){
                    return{
                        parking:"",
                        commissionList:"",
                    }
                },
                mounted(){
                    axios.default.baseURI="http://172.16.5.56:8080";
                    var self=this;
                    laydate.render({
                        elem: '#startTime' //指定元素
                        , type: 'datetime'
                    });//选择日期控件

                    //执行一个laydate实例
                    laydate.render({
                        elem: '#endTime' //指定元素
                        , type: 'datetime'
                    });

                    axios.post("LessorUser/selectAllParking").then(function(res){
                           console.log(res.data)


                          self.parking=res.data.allParking;
                    })
                    axios.post("LessorUser/selectAllCommission").then(function (res) {
                              console.log(res.data)
                             self.commissionList=res.data.commissionList;
                    })
                },
                methods:{
                     save(){


                     },
                     saves(){

                     },
                    add(){
                        var self=this;
                        axios.post("LessorUser/addOrder",{
                              starttime:$("#startTime").val(),
                              endtime:$("#endTime").val(),
                              pid:$("#select").val(),
                              cmid:$("#selects").val(),
                               price:$("#price").val(),
                        }).then(function (response) {
                               r
                        })


                    }
                }

            },

            "updatePasswordComponent": {
                template: "#t2",
                data() {
                    return {
                        uphone: "",
                        code: "123456",
                        success: "success",
                        success2: "success2",
                        false1: "false1",
                        false2: "false2",
                        newPassword: "",
                        newPasswords: "",

                        codes: ""
                    }
                },
                mounted() {
                    axios.defaults.baseURL = "http://172.16.5.56:8080";

                },

                methods: {
                    save() {
                        var self = this;
                        var zzphone = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
                        var uphone = self.uphone;
                        if (!zzphone.test(uphone)) {
                            layer.msg("电话格式错误", {time: 1000, icon: 5, shift: 6}, function () {
                            });
                            return;
                        }

                        axios.post("/LessorUser/LessorUserSendsms", {
                            uphone: self.uphone

                        }).then(function (response) {
                            self.code = response.data

                            /*self.uphone="";*/
                        })

                    },
                    submit() {
                        var self = this;
                        var zzCode = /^\d{6}$/;
                        var zznewPassword = /^\d{6}$/;
                        var zznewPasswords = /^\d{6}$/;

                        var codes = self.codes;
                        var newpasssword = self.newPassword;
                        var newpasswords = self.newPasswords;
                        if (!zzCode.test(codes)) {
                            layer.msg("数字格式错误", {time: 1000, icon: 5, shift: 6}, function () {
                            });
                            return;
                        }
                        if (!zznewPassword.test(newpasssword)) {
                            layer.msg("数字格式错误", {time: 1000, icon: 5, shift: 6}, function () {
                            });
                            return;
                        }
                        if (!zznewPasswords.test(newpasswords)) {
                            layer.msg("数字格式错误", {time: 1000, icon: 5, shift: 6}, function () {
                            });
                            return;
                        }

                        axios.post("/LessorUser/LessorUserVerfity", {
                            code: self.code,
                            codes: self.codes,
                            newPassword: self.newPassword,
                            newPasswords: self.newPasswords
                        }).then(function (response) {
                            console.log(response.data)
                            if (response.data == self.success) {

                                layer.msg("验证码正确", {time: 1000, icon: 6, shift: 6}, function () {
                                });
                            } else if (response.data == self.false1) {
                                layer.msg("验证码错误", {time: 1000, icon: 5, shift: 5}, function () {
                                });
                                console.log("失败");
                            } else if (response.data == self.false2) {
                                layer.msg("两次密码不一致", {time: 1000, icon: 5, shift: 5}, function () {
                                });
                                console.log("失败");
                            } else if (response.data == self.success2) {
                                layer.msg("密码修改成功", {time: 1000, icon: 6, shift: 6}, function () {
                                });
                            }

                        })
                    },


                },

            },

            recommend: {
                template: "#recommend",
                data() {
                    return {
                        mycode: null,
                        othercode: null,
                        flag: true,
                    };
                },
                mounted() {
                    let self = this;
                    axios.defaults.baseURL = "http://172.16.5.56:8080";
                    axios.post("LessorUser/selectOne").then(function (res) {
                        self.mycode = res.data.loginUserInfo.mycode;
                        self.othercode = res.data.loginUserInfo.othercode;
                        if (self.othercode != null) {
                            self.flag = false;
                        }
                        $("#mycode").qrcode({
                            text: "http://172.16.5.48:63340/ssps/vue/tenant/index2.html?othercode=" + self.mycode,
                            width: 250,
                            height: 250,
                            colorDark: '#000',
                            colorLight: '#fff',
                        })
                    })
                },
                methods: {
                    referralCode() {
                        let self = this
                        axios.post("LessorUser/referralCode", {
                            "othercode": self.othercode,
                        }).then(function (res) {
                            lay.msg(res.data.result, function () {
                            })
                        });
                    },
                },
            },

            "parkingConponent": {
                template: "#parking",
                data() {
                    return {
                        list: null,
                        img1:"",
                        img2:"",
                    }
                },
                mounted() {
                    let self = this;
                    axios.defaults.baseURL = "http://172.16.5.56:8080";
                    axios.post("/LessorUser/LessorUserParking")
                        .then(function (response) {
                            self.list = response.data;
                            console.log(response.data);

                        });
                },
            },
            "orderComponent": {
                template: "#orderComponent",
                data() {
                    return {
                        list: "",
                        pageInfo: "",
                        pageNum: ""
                    }
                },
                mounted() {
                    let self = this;
                    this.go(1);

                },
                methods: {
                    go(page) {
                        let self = this;
                        axios.post("/LessorUser/LessorUserFindAllOrder/" + page).then(function (request) {
                            self.list = request.data.ordersList;
                            self.pageInfo = request.data.pageInfo;
                            console.log(request.data);
                        })
                    }
                }
            },

            "lockComponent":{
                template:"#lockComponent",


                data(){
                    return{
                        list:"",
                        pageInfo:"",
                    }
                },
                mounted(){
                    let self=this;
                    axios.default.baseURI="http://172.16.5.56:8080";
                    this.go(1);
                },

                methods:{
                   go(pageNum){
                       let self=this;
                       axios.post("/LessorUser/lockComment/"+pageNum).then(function (request) {
                           self.list = request.data.commentsList;
                           self.pageInfo = request.data.pageInfo;
                           console.log(request.data);
                       })
                   }
                }
            },

            "burseComponent": {
                template: "#t4"
            },
            "submitComponent": {
                template: "#t5"
            },
        }
    });

    $(document).ready(function () {
        "use strict";
        $(".related-vehiculs-items").owlCarousel({
            autoplay: true,
            autoplayTimeout: 3000,
            smartSpeed: 2000,
            loop: true,
            dots: true,
            nav: false,
            marging: 30,
            items: 4,
            responsiveClass: true,
            responsive: {
                0: {
                    items: 1,
                    nav: false
                },
                600: {
                    items: 2,
                    nav: false
                },
                1000: {
                    items: 3,
                    nav: true,
                    loop: false
                }
            }
        });
    });

</script>
</body>
</html>